<template>
  <div class="app-container layout-container" ref="el">
    <Breadcrumb />
    <div class="container">
      <div class="side app-container">
        <CustomTitle title="业务配置" />
        <Tree
          :treeData="treeData"
          v-model:value="activeTree"
          @change="changeTreeActive"
          :default-unfold="['processFolder', 'finance', 'client', 'auditConfig']"
        />
      </div>
      <div class="table">
        <component
          :is="(components as any)[activeComponent]"
          :rules="rules"
          :dict-id="currentDictId"
          :sys-config="sysConfig"
        ></component>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Breadcrumb from "@/components/Breadcrumb/index.vue";
import CustomTitle from "@/components/CustomTitle/index.vue";
import Tree from "./components/Tree.vue";
import Config from "./components/Config.vue";
import Portrait from "./components/Portrait.vue";
import CRM from "./components/CRM.vue";
import Process from "./components/Process.vue";
import Assignment from "./components/Assignment.vue";
import Approval from "./components/Approval.vue";
import Acceptance from "./components/Acceptance.vue";
import RectificationTemplate from "./components/rectificationTemplate/index.vue";
import RectificationType from "./components/rectificationType/index.vue";
import RectificationReason from "./components/rectificationReason/index.vue";
import FinanceSubjects from "./components/financeSubjects/index.vue";
import Loan from "./components/Loan/index.vue";
import AnnexConfig from "./components/annexConfig/index.vue";
import Invoices from "./components/Invoices/index.vue";
import TaskTemplate from "./components/taskTemplate/index.vue";
import ContractConfig from "./components/contractConfig/index.vue";
import Other from "./components/othor/index.vue";
import PublicFields from "./components/PublicFields.vue";
import DisplaySettings from "./components/DisplaySetting.vue";
import Advance from "./components/advance/index.vue";
// 数据字典
import TenantDict from "./components/tenantDict/index.vue";
// 审批设置
import FormFinancialApproval from "./components/financialApprovalForm/index.vue";
// 表单配置
import FormDesign from "./components/formDesign/index.vue";
// 报销借款表单
import FinancialReimbursementLoans from "./components/financialReimbursementLoans/index.vue";
import { getDictList } from "@/apis/tenantDict";
import { useUserStore } from "@/stores";

const userStore = useUserStore();

/**
 * @description 侧边栏组件
 */
const components = {
  Config,
  Portrait,
  CRM,
  Process,
  Assignment,
  Approval,
  Acceptance,
  RectificationTemplate,
  RectificationType,
  RectificationReason,
  AnnexConfig,
  FinanceSubjects,
  Loan,
  Invoices,
  TaskTemplate,
  ContractConfig,
  Other,
  Advance,
  PublicFields,
  DisplaySettings,
  TenantDict,
  FormFinancialApproval,
  FormDesign,
  FinancialReimbursementLoans
};
/**
 * @description 侧边栏选中
 */
const activeTree = ref<string>("Config");
const activeComponent = ref("Config");
/**
 * @description 侧边栏数据
 */
const whiteDictList = [
  // 商品等级
  "1795351456026521602",
  //报价定额单位
  "1830432793123549184"
];
const treeData = ref([
  {
    title: "配置类参数",
    key: "Config"
  },
  {
    title: "流程配置",
    key: "processFolder",
    children: [
      {
        title: "公共字段管理",
        key: "PublicFields"
      },
      {
        title: "表单配置",
        key: "FormDesign"
      },
      {
        title: "业务类型",
        key: "Portrait"
      },
      {
        title: "业务阶段",
        key: "CRM"
      },
      {
        title: "流程配置",
        key: "Process"
      },
      {
        title: "任务模板",
        key: "TaskTemplate"
      }
    ]
  },
  {
    title: "客户配置",
    key: "client",
    children: [
      {
        title: "分配权限",
        key: "Assignment"
      },
      {
        title: "客户附件",
        key: "AnnexConfig"
      }
    ]
  },
  {
    title: "财务配置",
    key: "finance",
    children: [
      {
        title: "表单设置",
        key: "financeFormConfig",
        children: [
          {
            title: "报销 / 借款表单",
            key: "FinancialReimbursementLoans"
          }
        ]
      },
      {
        title: "报销借款分类",
        key: "Loan"
      },
      {
        title: "预收款分类",
        key: "Advance"
      },
      {
        title: "其他收款分类",
        key: "Other"
      },
      {
        title: "审批设置",
        key: "auditConfig",
        children: [
          {
            title: "支付流水（正常）",
            key: `form-normal-pay-${userStore.userInfo?.tenantId}`
          },
          {
            title: "支付流水（红蓝冲）",
            key: `form-adjust-pay-${userStore.userInfo?.tenantId}`
          },
          {
            title: "意向金退款",
            key: `form-purpose-refund-${userStore.userInfo?.tenantId}`
          },
          {
            title: "预付款申请",
            key: `form-payment-apply-${userStore.userInfo?.tenantId}`
          },
          {
            title: "其他收款申请",
            key: `form-other-apply-${userStore.userInfo?.tenantId}`
          },
          {
            title: "资金调拨",
            key: `form-transfer-apply-${userStore.userInfo?.tenantId}`
          }
        ]
      },
      {
        title: "支付方式配置",
        key: "PaymentMethod"
      }
    ]
  },
  {
    title: "售后配置",
    key: "rectificationConfig",
    children: [
      {
        title: "售后模板",
        key: "RectificationTemplate"
      },
      {
        title: "售后分类",
        key: "RectificationType"
      }
      // {
      //   title: "售后原因设置",
      //   key: "RectificationReason"
      // }
    ]
  }
]);
const dictList = ref([]) as any;
const getTreeData = async () => {
  const { data } = await getDictList();
  data?.forEach((item: any) => {
    if (!whiteDictList.includes(item.dictId)) {
      const dictItem = {
        ...item,
        title: item.dictName,
        key: `dictList-${item.dictId}`
      };
      dictList.value?.push({ ...dictItem });
      treeData.value[2]?.children?.push({ ...dictItem });
    }
  });
};
/**
 * @description 侧边栏选中事件
 */
const currentDictId = ref("");
const sysConfig = ref({});
const changeTreeActive = (selectedKeys: string) => {
  if (selectedKeys) {
    activeTree.value = selectedKeys;
    activeComponent.value = selectedKeys;
    // 数据字典
    if (/dictList-/.test(selectedKeys) || selectedKeys === "PaymentMethod") {
      activeComponent.value = "TenantDict";
      currentDictId.value = selectedKeys !== "PaymentMethod" ? selectedKeys.split("-")[1] : selectedKeys;
    }
    // 财务审批配置
    if (/form-/.test(selectedKeys)) {
      activeComponent.value = "FormFinancialApproval";
      sysConfig.value = {
        formId: selectedKeys,
        component: "financial-approval-config"
      };
    }
    // 表单设置
    if (["FormDesign", "FinancialReimbursementLoans"].includes(selectedKeys)) {
      sysConfig.value = {
        component: selectedKeys === "FormDesign" ? "forms-panel" : "financial-reimbursement-loans"
      };
    }
  }
};

/**
 *必填校验
 */
const rules = [
  { required: true, message: "请输入" },
  { match: /^(?!\s*$).+$/, message: "请输入" }
];

getTreeData();
</script>

<style scoped lang="scss">
@import "index";
</style>
